import { FC, useEffect, useState, useRef } from "react";
import { observer, inject } from "mobx-react";
import { ITStore } from "../../store";

interface TProp {
  store: ITStore;
}

const fillColor = [
  "white",
  "#e6f7ff",
  "#bae7ff",
  "#91d5ff",
  "#69c0ff",
  "#40a9ff",
  "#1890ff",
  "#096dd9",
  "#ff85c0",
  "#f759ab",
  "#eb2f96",
  "#c41d7f"
];

const ReacterPlateCanvas: FC<TProp | any> = ({
  store,
  canvasData,
}: TProp | any): JSX.Element => {
  const canvasRef = useRef(null);

  useEffect(() => {
    const canvas: any = canvasRef.current;
    const ctx = canvas.getContext("2d");

    // 圆的配置
    // const circles = [
    //   { id: "A1", x: 80, y: 60, radius: 30, selected: false },
    //   { id: "A2", x: 200, y: 60, radius: 30, selected: false },
    //   { id: "A3", x: 320, y: 60, radius: 30, selected: false },
    //   { id: "B1", x: 80, y: 180, radius: 30, selected: false },
    //   { id: "B2", x: 200, y: 180, radius: 30, selected: false },
    //   { id: "B3", x: 320, y: 180, radius: 30, selected: false },
    // ];

    // 绘制所有圆
    function drawCircles() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      canvasData.forEach((circle: any) => {
        ctx.beginPath();
        ctx.arc(circle.x, circle.y, circle.radius, 0, Math.PI * 2);
        ctx.strokeStyle = circle.selected ? "#1890ff" : "#aaa";
        ctx.lineWidth = 4;
        // ctx.fillStyle = circle.selected ? "lightblue" : "white";
        ctx.fillStyle = fillColor[circle.reagentNumber || 0];
        ctx.fill();
        ctx.stroke();

        // 绘制圆的 ID
        ctx.fillStyle = "#666";
        ctx.font = "16px Arial";
        ctx.textAlign = "center";
        ctx.textBaseline = "middle";
        ctx.fillText(circle.id, circle.x, circle.y);
      });
    }

    // 框选功能
    // let isDrawing = false;
    // let startX: number, startY: number, endX: number, endY: number;

    // canvas.addEventListener("mousedown", (e: any) => {
    //   const mouseX = e.offsetX;
    //   const mouseY = e.offsetY;

    //   // 检查是否点击在圆内
    //   let clickedOnCircle = false;
    //   canvasData.forEach((circle:any) => {
    //     const dx = mouseX - circle.x;
    //     const dy = mouseY - circle.y;
    //     if (Math.sqrt(dx * dx + dy * dy) <= circle.radius) {
    //       clickedOnCircle = true;
    //     }
    //   });

    //   // 如果点击不在圆内，取消所有圆的选中状态
    //   if (!clickedOnCircle) {
    //     canvasData.forEach((circle: any) => (circle.selected = false));
    //     drawCircles();
    //   }

    //   // 开始框选
    //   isDrawing = true;
    //   startX = mouseX;
    //   startY = mouseY;
    // });

    // canvas.addEventListener("mousemove", (e: any) => {
    //   if (isDrawing) {
    //     endX = e.offsetX;
    //     endY = e.offsetY;
    //     drawCircles();
    //     drawSelectionRect();
    //   }
    // });

    // canvas.addEventListener("mouseup", () => {
    //   if (isDrawing) {
    //     isDrawing = false;
    //     selectCircles();
    //     drawCircles();
    //   }
    // });

    // 绘制框选矩形
    // function drawSelectionRect() {
    //   ctx.beginPath();
    //   ctx.rect(startX, startY, endX - startX, endY - startY);
    //   // 设置矩形边框样式
    //   ctx.lineWidth = 1;
    //   ctx.strokeStyle = "gray";
    //   // 填充半透明蓝色以显示框选区域
    //   ctx.fillStyle = "rgba(0, 0, 255, 0.1)";
    //   ctx.fill();

    //   ctx.stroke();
    // }

    // 判断圆是否在框选区域内
    // function isCircleInRect(circle: any, rect: any) {
    //   return (
    //     circle.x + circle.radius >= rect.x1 &&
    //     circle.x - circle.radius <= rect.x2 &&
    //     circle.y + circle.radius >= rect.y1 &&
    //     circle.y - circle.radius <= rect.y2
    //   );
    // }

    // 选中框选区域内的圆
    // function selectCircles() {
    //   const rect = {
    //     x1: Math.min(startX, endX),
    //     y1: Math.min(startY, endY),
    //     x2: Math.max(startX, endX),
    //     y2: Math.max(startY, endY),
    //   };

    //   canvasData.forEach((circle: any) => {
    //     circle.selected = isCircleInRect(circle, rect);
    //   });

    //   // 弹出选中圆的 ID
    //   const selectedIds = canvasData
    //     .filter((circle: any) => circle.selected)
    //     .map((circle: any) => circle.id);
    //   if (selectedIds.length > 0) {
    //     // console.log(selectedIds)
    //   }
    // }

    // 初始化绘制
    drawCircles();
  }, [canvasData]);

  return (
    <canvas
      className="plateborder"
      ref={canvasRef}
      width="560"
      height="400"
    ></canvas>
  );
};

export default inject("store")(observer(ReacterPlateCanvas));
